<template>
    <div ref="el" class="code-editor" ></div>
</template>

<script lang="ts" setup>
import { onMounted, nextTick, watch, PropType } from "vue";
import "./worker.ts";
import { useCodeEditor, useCompileCode, EditorOptions } from "./hooks.ts";

defineOptions({
    name: "CodeEditor"
});

const props = defineProps({
    modelValue: {
      type: String,
      required: true,  
    },
    options: {
        type: Object as PropType<EditorOptions>,
        default: () => ({})
    }
});

const emit = defineEmits(["update:modelValue"]);

const { el, createEditor, updateEditorValue, getEditorValue } = useCodeEditor(props.options);



onMounted(async ()=>{
    const editor = createEditor(props.options);
    //console.log(editor);
    updateEditorValue(props.modelValue);

    // editor.onDidBlurEditorText(()=>{
    //     console.log('onDidBlurEditorText');
    // })

    editor.onDidBlurEditorWidget(() => {
       // console.log('onDidBlurEditorWidget');
       emit("update:modelValue", getEditorValue());
    })
});

watch(
    ()=> props.modelValue,
    ()=> {
        updateEditorValue(props.modelValue);
    }
);

</script>

<style scoped lang="scss">
.code-editor {
    height: 100%;
}
</style>